<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>



<div id="time">12312iv3</div>


    <div>
        <div class="form-group">
            <label>IP地址</label>
            <input type="text" class="form-control" id="ipAdress" >
        </div>
        <div class="form-group">
            <label>端口号</label>
            <input type="text" class="form-control" id="portA" >
        </div>
        <div class="form-group">
            <label>内容</label>
            <input type="text" class="form-control" id="msg">
        </div>
        <button  class="btn btn-default" onclick="send()">发送</button>
    </div>

    <table   class="table table-hover">
        <thead>
        <tr>
            <th>内容</th>
            <th>时间</th>
        </tr>
        </thead>
        <tbody id="connect">
        <tr>
            <td>Mark</td>
            <td>Otto</td>
        </tr>
        </tbody>
    </table>

    <script>
        $(document).ready(function(){
            setInterval("loadList()",1000);
        });
        function loadList() {
            var myDate = new Date();//获取系统当前时间
            $("#time").html(myDate.toLocaleTimeString())
            $.ajax({
                url: "view/getList",
                success: function (result) {
                    var htmlData = ""
                    for (var i = 0; i < result.list.length; i++) {
                       var data = `        <tr>
                              <td>${result.list[i].msg}</td>
                              <td>${result.list[i].createTime}</td>
                          </tr>`

                        htmlData = htmlData + data
                    }

                    $("#connect").html(htmlData)
                },
                error: function (error) {
                    console.log(error)
                   // alert("error")
                }

            })
        }
        function send() {
            var ip=$("#ipAdress").val()
            var port=$("#portA").val()
            var msg=$("#msg").val()
            var url= `view/send?ip=${ip}&port=${port}&msg=${msg}`

            $.ajax({
                url: url,
                success: function (result) {
                   // alert(result.msg)
                },
                error: function (error) {
                    console.log(error)
                   // alert(error)
                }

            })


        }
    </script>
</body>
</html>